<template>
  <view :class="[`${prefixCls}-empty-container`]">
    <uv-empty
      :mode="mode"
      :text="text || emptyMode[`${mode}`].text"
      :textColor="textColor"
      :textSize="textSize"
      :icon="emptyMode[`${mode}`].icon"
      :iconColor="iconColor"
      :iconSize="iconSize"
      :width="width"
      :height="height"
      :marginTop="marginTop"
    >
      <slot />
    </uv-empty>
  </view>
</template>

<script>
/**
 * https://www.uvui.cn/components/empty.html
 * cu-empty 内容为空 基于 uv-empty
 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 预设了十几个场景的图标，方便使用。
 * @property {String}			mode		选择预置的图标类型 （默认 'data' ）预设值:'address', 'car', 'coupon', 'data', 'favor', 'history', 'list', 'message', 'news', 'order', 'page', 'permission', 'search', 'wifi-off'
 * @property {String}			icon		内置图标名称，或图片路径，建议绝对路径
 * @property {String}			text		提示文字
 * @property {String}			textColor	文字颜色 (默认 '#c0c4cc' )
 * @property {String | Number}	textSize	文字大小 （默认 14 ）
 * @property {String}			iconColor	图标的颜色 （默认 '#c0c4cc' ）
 * @property {String | Number}	iconSize	图标的大小 （默认 90 ）
 * @property {String | Number}	width		图标宽度，单位px （默认 160 ）
 * @property {String | Number}	height		图标高度，单位px （默认 160 ）
 * @property {Boolean}			show		是否显示组件 （默认 true ）
 * @property {String | Number}	marginTop	组件距离上一个元素之间的距离，默认px单位 （默认 0 ）
 * @example <cu-empty mode="data"></cu-empty>
 */
import wifiOff from '@/static/wifi-off.png'
export default {
  name: 'cuEmpty',
  components: {},
  mixins: [],
  props: {
    mode: {
      type: [String],
      default: 'data',
    },
    text: {
      type: [String],
      default: '',
    },
    textColor: {
      type: [String],
      default: '#c0c4cc',
    },
    textSize: {
      type: [String, Number],
      default: 14,
    },
    icon: {
      type: [String],
      default: '',
    },
    iconColor: {
      type: [String],
      default: '#c0c4cc',
    },
    iconSize: {
      type: [String, Number],
      default: 90,
    },
    width: {
      type: [String, Number],
      default: 267,
    },
    height: {
      type: [String, Number],
      default: 196,
    },
    marginTop: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      emptyMode: {
        address: { text: '没有收货地址', icon: CDN('/common/static/images/empty/address.png') },
        car: { text: '购物车为空', icon: CDN('/common/static/images/empty/car.png') },
        coupon: { text: '没有优惠券', icon: CDN('/common/static/images/empty/coupon.png') },
        data: { text: '数据为空', icon: CDN('/common/static/images/empty/data.png') },
        favor: { text: '暂无收藏', icon: CDN('/common/static/images/empty/favor.png') },
        history: { text: '无历史记录', icon: CDN('/common/static/images/empty/history.png') },
        list: { text: '列表为空', icon: CDN('/common/static/images/empty/list.png') },
        message: { text: '消息列表为空', icon: CDN('/common/static/images/empty/message.png') },
        news: { text: '无新闻列表', icon: CDN('/common/static/images/empty/news.png') },
        order: { text: '订单为空', icon: CDN('/common/static/images/empty/order.png') },
        page: { text: '页面不存在', icon: CDN('/common/static/images/empty/page.png') },
        permission: { text: '无权限', icon: CDN('/common/static/images/empty/permission.png') },
        search: { text: '没有搜索结果', icon: CDN('/common/static/images/empty/search.png') },
        wifioff: { text: '没有WiFi', icon: wifiOff },
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.#{prefixCls('empty-container')} {
  margin: 0 auto;
  padding: 100rpx 30rpx;
}
</style>
